<script lang="ts" setup>
import { onMounted, ref, watch } from "vue";
import * as echarts from "echarts";
import { equip1 } from "@/configs/equip";
import { onEquipInited } from "@/utils/init";
import { datetimeFormat } from "@/utils/date";

const chart = {
    instance: null as echarts.ECharts | null,
    option: {
        tooltip: { trigger: "axis" },
        visualMap: {
            show: false,
            type: "continuous",
            seriesIndex: 0,
            min: 6,
            max: 7.5,
            inRange: { color: ["rgb(26, 211, 213)", "rgb(241, 247, 97)"] },
        },
        grid: { left: "10%", top: "30", right: "5%", bottom: "30" },
        xAxis: { type: "category", axisLabel: { color: "#92dde1" }, axisTick: { show: false }, data: [] as string[] },
        yAxis: { type: "value", axisLabel: { color: "#92dde1" }, splitLine: { lineStyle: { color: "#104d4d" } } },
        series: [{ type: "line", smooth: true, data: [] as number[], symbol: "none" }],
    },
};
interface Props {
    equip1V2: Equip.EquipInfo;
}
const props = withDefaults(defineProps<Props>(), {});
const oChart = ref<HTMLDivElement | null>(null);
watch(
    () => props.equip1V2.histories,
    () => updateChart(),
    { deep: true }
);
onMounted(async () => {
    chart.instance = echarts.init(oChart.value);
    chart.instance.setOption(chart.option);
    await onEquipInited();
    updateChart();
});
function updateChart() {
    chart.option.xAxis.data = props.equip1V2.histories.map((v) => datetimeFormat(v.time, "h:m"));
    chart.option.series[0].data = props.equip1V2.histories.map((v) => v.aiValues[equip1.phIndex]);
    chart.instance?.setOption(chart.option);
}
</script>

<template>
    <section>
        <h3>
            <svg class="icon" aria-hidden="true"><use xlink:href="#icon-zhiwu"></use></svg>
            <b>酸碱度曲线</b>
            <span>Suan Jian Du Qu Xian</span>
        </h3>
        <hr class="to-right" />
        <div ref="oChart" class="content"></div>
    </section>
</template>

<style lang="scss" scoped>
@use "../styles/section.scss";
</style>
